import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { useSelector, useDispatch } from 'react-redux'
import { Grid, Typography, Avatar } from '@material-ui/core';
import { Icon } from 'components/atoms';

const useStyles = makeStyles(theme => ({
    root: {
        width: "100%",
        padding: "30px 20px 100px",
        background: "#000",
    },
    main: {
        padding: "50px 10px",
        background: "#1e1e1e",
    },
    title: {
        width: "100%",
        fontSize: "28px",
        textAlign: "center",
        fontWeight: "bold",
        flex: '0 0 auto',
        whiteSpace: 'nowrap',
        color: "#fff",
        [theme.breakpoints.up('md')]: {
            fontSize: "38px",
        },
    },
    sub_title: {
        fontSize: "18px",
        textAlign: "center",
        fontWeight: "100",
        flex: '0 0 auto',
        whiteSpace: 'nowrap',
        color: "#fff",
        marginTop: "20px",
        marginBottom: "50px",
        [theme.breakpoints.up('md')]: {
            fontSize: "20px",
        },
    },
    grid: {
        minHeight: "80vh",
        background: "#1e1e1e",
    },
    gridItem: {
        padding: "10px",
        minHeight: "80vh",
        [theme.breakpoints.up('md')]: {
            height: "560px",
            minHeight: "80vh",
        },
    },
    mainItem: {
        color: "#fff",
        fontSize: "18px",
        padding: "20px 30px",
        height: "650px",
        transition: "0.3s all",
        borderRadius: "4px",
        border: "1px solid #F21F23",
        [theme.breakpoints.up('md')]: {
            fontSize: "22px",
        },
        "&:hover": {
            backgroundColor: "#929292",
            border: "1px solid #929292",
            height: "700px",
            transition: "0.3s all",
            padding: "30px 30px",

        },
        "&:hover .btn": {
            background: "#fff",
            color: "#929292",
            transition: "0.3s all",
        },
    },
    number: {
        fontSize: "48px",
        marginTop: "10px",
    },
    sub_number: {
        fontSize: "24px",
    },
    ul: {
        listStyle: "none",
        borderRadius: "0 0 4px 4px",
        overflow: "hidden",
        marginTop: "20px",
    },
    li: {
        fontSize: "14px",
        lineHeight: "28px",
        marginTop: "16px",
        [theme.breakpoints.up('md')]: {
            fontSize: "16px",
        },
    },
    btn: {
        padding: "8px 40px",
        borderRadius: "50px",
        background: "#F21F23",
        fontSize: "16px",
        cursor: "pointer",
        marginTop: "50px",
        transition: "0.3s all",
    },
}));

const text = ["Number of Screens", "Unlimited TV Shows and Movies", "Watch on Mobile and Tablet", "Watch on Laptop and TV", "HD Avaliable", "Ultra HD Available",]

function Main(props) {
    const { data, className, ...rest } = props;
    const classes = useStyles();
    const artistData = data.artist

    // console.log(profileData)

    return (
        <div className={clsx(classes.root)} >
            <div className={clsx(classes.main)}>
                <Typography variant="body2" color="textPrimary" className={clsx(classes.title)}>
                    Support {artistData?.name}
                </Typography>
                <Typography variant="body2" color="textPrimary" className={clsx(classes.sub_title)}>
                    Shout out to my supporters
                </Typography>

                <Grid container className={clsx(classes.grid)} justifyContent='center' alignItems='center'>
                    <Grid item xs={12} md={4} lg={3} className={clsx(classes.gridItem,)} container justifyContent='center' alignItems='center'>
                        <div className={classes.mainItem}>
                            <Typography variant="body2" color="textPrimary" className={clsx(classes.title)}>
                                Bronze
                            </Typography>
                            <Typography variant="body2" color="textPrimary" className={clsx(classes.title)}>
                                Supporter
                            </Typography>
                            <Typography variant="body2" color="textPrimary" className={clsx(classes.title, classes.number)}>
                                $5
                            </Typography>

                            <ul className={classes.ul}>
                                {
                                    text.map((item, index) => <li className={classes.li} key={index}>
                                        <Icon
                                            fontIconClass={`${index < 2 ? "fas fa-check" : "fas fa-times"}`}
                                            style={{ color: "#fff", verticalAlign: "middle", marginRight: "10px" }}
                                        />
                                        {item}
                                    </li>)
                                }

                            </ul>
                            <Grid item xs={12} container justifyContent='center'>
                                <div className={clsx(classes.btn, "btn")}>Support</div>
                            </Grid>
                        </div>
                    </Grid>
                    <Grid item xs={12} md={4} lg={3} className={clsx(classes.gridItem,)} container justifyContent='center' alignItems='center'>
                        <div className={classes.mainItem}>
                            <Typography variant="body2" color="textPrimary" className={clsx(classes.title)}>
                                Gold
                            </Typography>
                            <Typography variant="body2" color="textPrimary" className={clsx(classes.title)}>
                                Supporter
                            </Typography>
                            <Typography variant="body2" color="textPrimary" className={clsx(classes.title, classes.number)}>
                                $20
                                <Typography component="span" color="textPrimary" className={clsx(classes.title, classes.sub_number)}>
                                    /mo
                                </Typography>
                            </Typography>

                            <ul className={classes.ul}>
                                {
                                    text.map((item, index) => <li className={classes.li} key={index}>
                                        <Icon
                                            fontIconClass={`${index < 5 ? "fas fa-check" : "fas fa-times"}`}
                                            style={{ color: "#fff", verticalAlign: "middle", marginRight: "10px" }}
                                        />
                                        {item}
                                    </li>)
                                }

                            </ul>
                            <Grid item xs={12} container justifyContent='center'>
                                <div className={clsx(classes.btn, "btn")}>Support</div>
                            </Grid>
                        </div>
                    </Grid>
                    <Grid item xs={12} md={4} lg={3} className={clsx(classes.gridItem,)} container justifyContent='center' alignItems='center'>
                        <div className={classes.mainItem}>
                            <Typography variant="body2" color="textPrimary" className={clsx(classes.title)}>
                                Platinum
                            </Typography>
                            <Typography variant="body2" color="textPrimary" className={clsx(classes.title)}>
                                Supporter
                            </Typography>
                            <Typography variant="body2" color="textPrimary" className={clsx(classes.title, classes.number)}>
                                $30
                                <Typography component="span" color="textPrimary" className={clsx(classes.title, classes.sub_number)}>
                                    /mo
                                </Typography>
                            </Typography>

                            <ul className={classes.ul}>
                                {
                                    text.map((item, index) => <li className={classes.li} key={index}>
                                        <Icon
                                            fontIconClass="fas fa-check"
                                            style={{ color: "#fff", verticalAlign: "middle", marginRight: "10px" }}
                                        />
                                        {item}
                                    </li>)
                                }

                            </ul>
                            <Grid item xs={12} container justifyContent='center'>
                                <div className={clsx(classes.btn, "btn")}>Support</div>
                            </Grid>
                        </div>
                    </Grid>
                </Grid>
            </div>
        </div>
    )
}

Main.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};

export default Main

